<template>
	<web-view v-if="url" :src="url"></web-view>
	<view v-else>
		<view class="card" v-for="(item,index) in goodsList?.list" @click="goDetail(item)">
			<!-- 分类项 -->
			<view class="sort_item" v-if="item?.category_name">
				{{item?.category_name}}
			</view>
			<!-- 已下架 -->
			<view v-if="item?.release_status==4" class="yxj" style="position: absolute;z-index: 99;top: 0rpx;left: 0rpx;">
				<image src="@/static/image/my/yxj.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
			<view class="sort_itemh" v-if="item?.hongBao&&item.hongBao_num!==0">
				<image style="width: 55rpx;height: 55rpx;" src="/static/hongbao.png" mode=""></image>
			</view>
			<fui-row style="height: 150rpx;">
				<fui-col :span="7">
					<view class="fui-col__item fui-color__black">
						<!-- 判断图片是否是数组&&图片数组是否length>1 成立取数组第0项 -->
						<image class="fui-col_img" style="width: 90%;height: 150rpx;margin: auto;border-radius: 10rpx;" :src="item[classifyImg[goodsList.type]].length>1&&Array.isArray(item[classifyImg[goodsList.type]])?item[classifyImg[goodsList.type]][0]:item[classifyImg[goodsList.type]]" mode=""></image>
					</view>
				</fui-col>
				<fui-col :span="17">
					<view style="height: 80rpx;width: 50vw;" class="fui-col__item fui-col_text">
						<text class="fui-col_text-a">
							{{item?.title}}
						</text>
					</view>
					<view class="sort" :class="!item?.is_sticky&&!item?.is_auto_refresh&&!item?.is_headline?'sort1':''">
						<view class="Functionalshow">
							<view class="zd" v-if="item?.is_headline">
								<text>头条</text>
							</view>
							<view class="zd" v-if="item?.is_sticky">
								<text>置顶</text>
							</view>
							<view class="zd" v-if="item?.is_auto_refresh">
								<text>自动刷新</text>
							</view>
							<!-- <view class="zd" v-if="item?.hongBao&&item.hongBao_num!==0">
								<text>红包￥{{item.hongBao_money}}</text>
							</view> -->
						</view>

						<view class="browse">
							<text>浏览{{item?.view_count}}次</text>
						</view>
						<view class="uptime" v-if="goodsList.type=='5'">
							<view class="">
								团队人数
							</view>
							<view style="margin-top: 10rpx;">
								{{item.team_num}}
							</view>
						</view>
					</view>
					<view class="fui-col_bottom">
						<view class="sort_item1" v-if="goodsList.type=='5'">
							{{item.category_id?'地推团队':'网推团队'}}
						</view>
						<view v-if="item.category_id==0&&goodsList.type=='5'" class="sort_item1">
							{{item.region}}
						</view>
						<view class="sort_item2" v-if="goodsList.type=='6'">
							{{item.cycle}}
						</view>
						<!-- <view class="zd" v-if="item?.hongBao&&item.hongBao_num!==0">
							<text>红包￥{{item.hongBao_money}}</text>
						</view> -->
						<view style="color: var(--fui-color-label);">
							<text>{{getDateDiff(item?.publish_date)}}</text>
						</view>
					</view>
				</fui-col>
			</fui-row>

			<view class="bottom" :class="item?.release_status==4?'onebottom':''">
				<view class="edit_ anniu" v-if="item?.release_status!==4">
					{{getType(item?.release_status)}}
				</view>
				<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="del_ anniu" @click.stop="showBtnf(index,item.showChange)">
					{{item.showChange?noshowText:showText}}
				</view>
			</view>

			<view class="bottom1" :animation="animationData" v-show="item.showChange">
				<!-- <slot name="admin" :row="item"></slot> -->
				<view style="display: flex;justify-content: space-between;">
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu edit" @click.stop="edit(item._id)" v-if="goodsList.type !='1'||item?.release_status==1||item?.release_status==3||item?.release_status==4">
						编辑
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu pinned" @click.stop="allClck(item?._id,'置顶','请输入置顶天数')" v-if="item?.release_status==1 && isSohw.includes('置顶')">
						置顶
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu refresh" @click.stop="refresh(item?._id)" v-if="item?.release_status==1 && isSohw.includes('刷新')">
						刷新
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu zdrefresh" @click.stop="allClck(item?._id,'官方推荐','请输入官方推荐天数')" v-if="isSohw.includes('官方推荐') && goodsList.type == '1' && item?.release_status==1">
						官方推荐
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu del" @click.stop="remove(item?._id)">
						删除
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;" v-if="item?.release_status==1">
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu zdsx1" @click.stop="allClck(item?._id,'自动刷新')" v-if="isSohw.includes('自动刷新')">
						自动刷新
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu zdrefresh" @click.stop="allClck(item?._id,'官方推荐','请输入官方推荐天数')" v-if="isSohw.includes('官方推荐') && goodsList.type !='1' && goodsList.type !='4' && goodsList.type !='6'">
						官方推荐
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu refresh" @click.stop="paiMoney(item?._id)" v-if="isSohw.includes('派发红包')">
						派发红包
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu refresh" @click.stop="lunbo" v-if="isSohw.includes('大图轮播')">
						大图轮播
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu jrbs" @click.stop="onshowTop(item?._id,item?.is_headline)" v-if="isSohw.includes('头条')">
						头条
					</view>
					<view style="background:linear-gradient(to right top, #ff6f49, #ff5a5e);" class="anniu jrbs" @click.stop="allClck(item?._id,'每日推荐','请输入每日推荐天数')" v-if="isSohw.includes('每日推荐')">
						每日推荐
					</view>
				</view>
			</view>
			<view class="endTime">
				<fui-collapse-item :isBorder="false" v-if="item?.is_headline||item?.is_sticky||item?.is_auto_refresh">
					<view class="fui-item__box">
						<text style="font-size: 28rpx;color: #FF2B2B;">推广详情</text>
					</view>
					<template v-slot:content>
						<fui-preview :previewData="previewData(item)"></fui-preview>
					</template>
				</fui-collapse-item>
			</view>
			<view class="bai" v-if="item?.release_status==3||item?.release_status==4">
				<fui-icon :size="50" color="#FF2B2B" name="warning"></fui-icon>
				<view style="margin-left: 10rpx;" v-if="item?.release_status==3">
					失败原因：{{item?.reason}}
				</view>
				<view style="margin-left: 10rpx;" v-else>
					下架原因：{{item?.reason}}
				</view>
			</view>
		</view>

		<!-- 头条-置顶-自动刷新-派发红包-弹窗 -->
		<fui-modal maskClosable :buttons="[]" width="650" @cancel="onClose" :show="showDialog&&title!='删除'">

			<!-- 头条内容 -->
			<view v-if="title=='我要上头条'" style="position: relative;padding: 32rpx;display: flex;flex-direction: column;align-items: center;">
				<text class="fui-title">{{title}}</text>
				<fui-input min="1" radius="20" style="margin-top: 20rpx;" type="number" backgroundColor="#f3f5f7" v-model="headline.headline_time" placeholder="请输入头条天数"></fui-input>
			</view>
			<!-- 置顶内容-->
			<view v-if="title!=='自动刷新' && title!=='我要上头条' && title!=='派发红包'" style="position: relative;padding: 32rpx;display: flex;flex-direction: column;align-items: center;">
				<text class="fui-title">{{title}}</text>
				<fui-input v-if="title=='置顶'" @input="inputNum" min="1" radius="20" style="margin-top: 20rpx;" type="number" backgroundColor="#f3f5f7" v-model="pinnedday" max="2000" :placeholder="placeholder"></fui-input>
			</view>
			<!-- 自动刷新内容 -->
			<view v-else-if="title=='自动刷新'" style="position: relative;padding: 32rpx;display: flex;flex-direction: column;align-items: center;">
				<text class="fui-title">{{title}}</text>
				<view style="display: flex;align-items: center;">
					<fui-input label="刷新间隔" type="number" min="1" :bottomLeft="0" borderTop placeholder="请输入" v-model="refreshDate"></fui-input><text style="color: #FF2B2B;">分钟</text><text>自动刷新</text>
				</view>
				<view style="display: flex;align-items: center">
					<fui-input label="刷新次数" type="number" min="1" :bottomLeft="0" borderTop placeholder="请输入" v-model="refreshNum"></fui-input><text style="color: #FF2B2B;">次</text><text>停止刷新</text>
				</view>
			</view>
			<!-- 派发红包内容 -->
			<view v-else-if="title=='派发红包'" style="position: relative;padding: 32rpx;display: flex;flex-direction: column;align-items: center;">
				<text class="fui-title">{{title}}</text>
				<view style="display: flex;align-items: center;">
					<fui-input label="红包金额" type="number" min="1" :bottomLeft="0" borderTop :placeholder="'至少'+hongBao_money+'元'" v-model="allhongbao"></fui-input>
				</view>
				<view style="display: flex;align-items: center">
					<fui-input label="红包份数" type="number" min="1" :bottomLeft="0" borderTop :placeholder="'至少'+hongBao_num+'份,每份不低于0.1元'" v-model="hongbaoNum"></fui-input>
				</view>
			</view>

			<fui-button text="确定" style="margin-top: 50rpx;" width="240rpx" height="72rpx" :size="28" radius="36rpx" background="#ff6156" borderWidth="0" :margin="['0','0','24rpx']" @click="confirm(title)">
			</fui-button>

		</fui-modal>

		<!-- 头条下拉框抽屉 -->
		<fui-select :show="headline.showTop" textKey="grade_ranking" :options="headline.topList" title="请选择头条排名" @confirm="TopConfirm" @close="TopClose"></fui-select>

		<!-- 删除内容确认框 -->
		<fui-dialog maskBackground="rgba(0,0,0,.1)" :show="showDialog&&title=='删除'" content="是否删除该文章" maskClosable @click="onClick" @close="onClose"></fui-dialog>

		<!-- 支付 -->
		<pay ref="uniPay"></pay>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		nextTick
	} from 'vue'
	import {
		getDateDiff,
		parseCode,
		formatDate
	} from '@/utils/index.js'
	import {
		usedata
	} from "./hooks/usedata.js"
	const goodsList = defineProps({
		// 数据项
		list: {
			type: Array,
			default: () => []
		},
		//广告管理分类
		type: {
			type: String,
			default: ""
		},
		// 广告分类id
		category_id: {
			type: String,
			default: ""
		},
		// 分类名称
		name: {
			type: String,
			default: ""
		}
	})

	function processCondition(val, conditionType) {
		const currentTimestamp = Date.now();
		let conditionTime, conditionExpireTime, label;

		switch (conditionType) {
			case 'headline':
				conditionTime = val?.headline_time;
				conditionExpireTime = val?.headline_expire_time;
				label = '头条';
				break;

			case 'sticky':
				conditionTime = val?.sticky_time;
				conditionExpireTime = val?.sticky_expire_time;
				label = '置顶';
				break;

			case 'auto_refresh':
				conditionTime = val?.auto_refresh_num;
				conditionExpireTime = val?.auto_refresh_minute;
				label = '刷新';
				break;

			default:
				return null; // 未知条件类型
		}
		if (label == "刷新") {
			return {
				list: [{
						label: '刷新间隔时间',
						value: conditionExpireTime + '分钟' || 0 + '分钟'
					},
					{
						label: '刷新剩余次数',
						value: conditionTime + '次' || 0 + '次'
					}
				]
			}
		}
		const conditionSetTimestamp = conditionExpireTime - conditionTime * 24 * 60 * 60 * 1000;
		const conditionStartTimestamp = conditionExpireTime - conditionTime * 24 * 60 * 60 * 1000;
		const remainingDays = Math.floor((conditionExpireTime - currentTimestamp) / (24 * 60 * 60 * 1000));

		return {
			list: [{
					label: `${label}开始时间`,
					value: formatDate(conditionSetTimestamp),
				},
				{
					label: `${label}天数`,
					value: conditionTime + '天' || 0 + '天'
				},
				{
					label: `${label}已过天数`,
					value: (conditionTime - remainingDays) + '天' || 0 + '天'
				}, {
					label: `${label}到期时间`,
					value: formatDate(conditionExpireTime)
				}
			],
		};
	}
	
	const lunbo = ()=>{
		const param = {
			name: "轮播管理",
			publish_type: "3",
			_id: "65a0e01721821b50af3f80ec"
		}
		// #ifdef H5
		uni.fui.href(`/pages/push/uploadSwiper/uploadSwiper?title=${encodeURIComponent(JSON.stringify(param))}`)
		// #endif
		// #ifdef APP-PLUS
		uni.fui.href(`/pages/push/uploadSwiper/uploadSwiper?title=${JSON.stringify(param)}`)
		// #endif
	}
	const previewData = (val) => {
		const conditions = [val?.is_headline, val?.is_sticky, val?.is_auto_refresh];
		const conditionStr = conditions.map(cond => cond ? '1' : '0').join('');

		let result1 = [];
		let result2 = [];
		let result3 = [];
		switch (conditionStr) {
			case '111':
				// 三个条件同时满足的情况
				// TODO: 处理三个条件同时满足的逻辑
				// 使用示例
				result1 = processCondition(val, 'headline');
				result2 = processCondition(val, 'sticky');
				result3 = processCondition(val, 'auto_refresh');
				return {
					list: [...result1.list, ...result2.list, ...result3.list]
				}
				// return { message: '同时满足头条、置顶和自动刷新' };

			case '110':
				// 前两个条件满足的情况
				// TODO: 处理前两个条件满足的逻辑
				result1 = processCondition(val, 'headline');
				result2 = processCondition(val, 'sticky');
				return {
					list: [...result1.list, ...result2.list]
				}
				return { message: '满足头条和置顶' };

			case '011':
				// 后两个条件满足的情况
				// TODO: 处理后两个条件满足的逻辑
				result2 = processCondition(val, 'sticky');
				result3 = processCondition(val, 'auto_refresh');
				return {
					list: [...result2.list, ...result3.list]
				}
				// return { message: '满足置顶和自动刷新' };

			case '101':
				// 第一个和第三个条件满足的情况
				// TODO: 处理第一个和第三个条件满足的逻辑
				result1 = processCondition(val, 'headline');
				result3 = processCondition(val, 'auto_refresh');
				return {
					list: [...result1.list, ...result3.list]
				}
				// return { message: '满足头条和自动刷新' };

			case '100':
				// 头条满足的情况
				// TODO: 处理头条满足的逻辑
				return processCondition(val, 'headline')
				// return { message: '满足头条' };

			case '010':
				// 置顶满足的情况
				// TODO: 处理置顶满足的逻辑
				return processCondition(val, 'sticky')
				// return { message: '满足置顶' };

			case '001':
				// 自动刷新满足的情况
				// TODO: 处理自动刷新满足的逻辑
				return processCondition(val, 'auto_refresh')
				// return { message: '满足自动刷新' };

			default:
				// 没有满足条件的情况
				return { message: '没有满足条件的情况' };
		}
	}

	//支付实例
	const uniPay = ref()
	const {
		hongBao_money,
		hongBao_num,
		refreshDate,
		refreshNum,
		title,
		pinnedday,
		placeholder,
		allClck,
		showDialog,
		headline,
		onshowTop,
		selectTop,
		TopConfirm,
		TopClose,
		onClose,
		edit,
		goDetail,
		remove,
		refresh,
		onClick,
		confirm,
		sticky_mix_time,
		essence_mix_time,
		recommend_mix_time,
		connectionsData,
		connectionsShow,
		realNameShow,
		paiMoney,
		hongbaoNum,
		allhongbao,
		url
	} = usedata(goodsList, uniPay)
	// 图片
	const classifyImg = ['articles_img', 'application_logo']


	//分类
	const getType = (e) => {
		switch (e) {
			case 1:
				return '显示中'
				break;
			case 2:
				return '审核中'
				break;
			case 3:
				return '审核失败'
				break
		}
	}
	const showText = ref('更多操作')
	const noshowText = ref('收起')


	//动画效果
	const animationData = ref([])
	const showBtn = ref(false)
	const ind = ref(null)

	//预览图片
	const bigImg = (e) => {
		uni.previewImage({
			urls: [e],
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if (data.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: e,
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(e)
					}
				},
				fail: function(err) {

				}
			}
		});
	}
	const twocode = (e) => {
		parseCode(e)
	}
	//保存到相册
	const saveCode = (e) => {
		uni.saveImageToPhotosAlbum({
			filePath: e,
			success: function() {
				uni.fui.toast('成功保存到系统相册中')
			}
		});
	}
	// 购买套餐
	const toBuy = () => {
		uni.$fui.href("/pages/user/refreshPackage/refreshPackage")
	}


	//更多操作
	const showBtnf = (indexs, data) => {
		const animation = uni.createAnimation();
		if (!data) {
			data = false
		}
		goodsList.list.forEach((item) => {
			item['showChange'] = false
		})
		if (data == false) {
			goodsList.list.forEach((item, index) => {
				if (index == indexs) {
					item.showChange = true
					//实现动画效果
					animation
						.translateY(5).step({
							duration: 100
						}) // 0%
					animation.translateY(0).step(); // 100%
					animationData.value = animation.export();
				} else {
					item.showChange = false
					//实现动画效果
					animation
						.translateY(-5).step({
							duration: 100
						}) // 0%
					animation.translateY(0).step(); // 100%
					animationData.value = animation.export();
				}
			})
		}
	}

	// 判断不同的页面 展示不同的状态
	const isSohw = computed(() => {
		let arr = []
		switch (goodsList.type) {
			case "0":
				arr = ['置顶', '刷新', '自动刷新', '头条', "派发红包",'编辑', '删除',"大图轮播"]
				break;
			case '1':
				arr = ['置顶', '刷新', '编辑', '删除']
				break;
			case '4':
			case '6':
				arr = ['置顶', '刷新', '编辑', '删除']
				break;
			case '2':
			case '5':
				arr = ['编辑', '置顶', '刷新', '删除']
				break;
			case '7':
				arr = ['编辑', '删除']
				break;
		}
		return arr
	})


	// 事件
</script>

<style scoped lang="scss">
	.endTime {
		margin-top: 20rpx;
		border-top: 1rpx solid #ccc;
	}

	.onebottom {
		display: flex !important;
		justify-content: flex-end !important;
	}

	.anniu {
		height: 50rpx;
		line-height: 50rpx;
	}

	.bai {
		color: var(--fui-color-danger);
		margin-top: 20rpx;
		font-size: 26rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.zdsx {
		margin-right: 20rpx;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		color: #fff;
		font-size: 26rpx;
		background-color: var(--fui-color-primary);
	}

	.zd {
		color: #fff;
		font-size: 26rpx;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		// border: 0.5px solid black;
		background-color: var(--fui-color-danger);
		margin-right: 5rpx;
	}

	.sort_item1 {
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		background-color: #fc5531;
		color: #fff;
	}

	.uptime {
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		font-size: 26rpx;
		background-color: #feeaeb;
		color: #e57276;
		padding: 10rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: -32rpx;
		right: -32rpx
	}

	.fui-icon__close1 {
		position: absolute;
		right: 10px;
		top: 0px;
	}

	.fui-icon__close {
		position: absolute;
		right: 0px;
		top: 0px;
	}

	.fui-title {
		width: 80%;
		text-align: center;
		font-weight: bold;
	}

	.fui-descr {
		text-align: center;
		width: 80%;
		font-size: 24rpx;
		color: #B2B2B2;
		padding-top: 12rpx;
		padding-bottom: 48rpx;
	}

	.zdrefresh {
		padding: 5rpx 30rpx;
		color: #fff;
		border-radius: 10rpx;
		background-color: var(--fui-color-primary);
	}

	.zdsx1 {
		padding: 5rpx 30rpx;
		color: #fff;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-color: var(--fui-color-primary);
	}

	.jrbs {
		padding: 5rpx 30rpx;
		color: #fff;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: var(--fui-color-primary);
	}

	.refresh {
		padding: 5rpx 30rpx;
		color: #fff;
		border-radius: 10rpx;
		background-color: var(--fui-color-primary);
	}

	.pinned {
		padding: 5rpx 30rpx;
		color: #fff;
		border-radius: 10rpx;
		background-color: var(--fui-color-primary);
	}

	.bottom {
		margin-top: 20rpx;
		font-size: 24rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.bottom1 {
		margin-top: 20rpx;
		font-size: 24rpx;
		width: 100%;
	}

	.edit {
		padding: 5rpx 30rpx;
		color: #fff;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-color: var(--fui-color-primary);
	}

	.edit_ {
		padding: 5rpx 30rpx;
		color: var(--fui-color-primary);
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-color: #ebf1ff;
	}

	.del1 {
		padding: 5rpx 30rpx;
		color: #fff;
		border-radius: 10rpx;
		background-color: var(--fui-color-danger);
	}

	.del {
		padding: 5rpx 30rpx;
		color: #fff;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: var(--fui-color-danger);
	}

	.del_ {
		padding: 5rpx 30rpx;
		color: #fff;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: var(--fui-color-primary);
	}

	.fui-col_img {
		position: relative;
	}

	.fui-col_text-a {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.guanfang {
		font-size: 22rpx;
		color: #fff;
		padding: 5rpx 10rpx;
		background-color: #fc5531;
		position: absolute;
		top: 0px;
		border-radius: 5rpx;
	}

	.tap {
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}

	.fui-col_bottom {
		display: flex;
		justify-content: flex-end;
		font-size: 22rpx;
		margin-top: 5rpx;
	}

	.fui-col_bottom1 {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		margin-top: 5rpx;
	}

	.tap_item {
		margin-right: 10rpx;
	}

	.sort {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sort1 {
		margin-top: 5rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.browse {
		align-self: flex-end;
		color: var(--fui-color-label);
		font-size: 22rpx;
	}

	.sort_item2 {
		position: absolute;
		right: -32rpx;
		top: -32rpx;
		background-color: #4cb5d5;
		color: #fff;
		font-size: 26rpx;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		padding: 8rpx 20rpx;
	}

	.sort_item {
		position: absolute;
		right: 0;
		top: 0;
		background-color: #4cb5d5;
		color: #fff;
		font-size: 26rpx;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		padding: 8rpx 20rpx;
	}
	.sort_itemh{
		position: absolute;
		right: 0rpx;
		top: 65rpx;
		color: #fff;
		font-size: 26rpx;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
	}

	.card {
		padding: 32rpx;
		background-color: var(--fui-bg-color);
		border-radius: 16rpx;
		// margin-top: 12rpx;
		position: relative;
		margin: 20rpx;
	}

	.Functionalshow {
		display: flex;
		justify-items: center;
	}

	.fui-item__box {
		width: 100%;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.fui-descr {
		width: 100%;
		padding: 32rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		color: #7F7F7F;
		word-break: break-all;
		box-sizing: border-box;
	}

	::v-deep .endTime>.fui-collapse__item>.fui-collapse-item__title>.fui-collapse__title>.fui-item__box {
		padding: 30rpx 0 0 0 !important;
	}
</style>